<template>
  <el-dialog
      title="批量注册医生"
      :visible.sync="visible"
      width="500px"
      @close="handleClose">
    <el-form
        ref="form"
        :model="formData"
        label-width="auto"
        label-position="top"
        v-loading="loading">

      <el-form-item label="项目" prop="projectId">
        <el-select
            v-model="formData.projectId"
            placeholder="请选择项目"
            style="width: 100%;"
            filterable>
          <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projectName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="上传文件" prop="file">
        <el-upload
            :action="uploadUrl"
            :on-success="handleSuccess"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :limit="1">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <a :href="templateUrl" class="download-link">下载模版</a>
      </el-form-item>

      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import baseUrl from "@/request/config.js"
import { importProjectUser } from '@/request/api.js';

export default {
  name: 'BatchRegisterDialog',
  props: {
    visible: Boolean,
    projectList: Array
  },
  data() {
    return {
      loading: false,
      formData: { projectId: '' },
      fileList: [],
      uploadUrl: baseUrl+'/sign/live/doctor/uploadFile',
      templateUrl: '//life-oasis.oss-cn-beijing.aliyuncs.com/video/劳务协议明细.xlsx'
    };
  },
  created(){
    console.log(this.uploadUrl)

  },

  methods: {
    handleSubmit() {
      if (!this.validateForm()) return;

      this.loading = true;
      const payload = {
        projectId: this.formData.projectId,
        fileName: this.fileList[0].fileName
      };

      importProjectUser(payload)
          .then(res => {
            if (res.code === 200) {
              this.$emit('success', res.data);
              this.resetForm();
            } else {
              this.$message.warning(res.msg);
            }
          })
          .finally(() => {
            this.loading = false;
          });
    },

    handleSuccess(res, file) {
      this.fileList = [{
        fileName: res,
        name: file.name
      }];
    },

    handleRemove() {
      this.fileList = [];
    },

    handleExceed() {
      this.$message.warning('只允许上传一个文件');
    },

    handleCancel() {
      this.$emit('update:visible', false);
    },

    handleClose() {
      this.resetForm();
      this.$emit('update:visible', false);
    },

    validateForm() {
      if (!this.formData.projectId) {
        this.$message.warning('请选择项目');
        return false;
      }
      if (this.fileList.length === 0) {
        this.$message.warning('请上传文件');
        return false;
      }
      return true;
    },

    resetForm() {
      this.formData = { projectId: '' };
      this.fileList = [];
    }
  }
};
</script>

<style scoped>
.download-link {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #409EFF;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>